<!--项目第一步，用户填写身份证信息和手机号码-->
<template>
  <div class="container">
    <van-form @submit="onSubmit">
      <van-cell required title="身份证"/>
      <van-field
        v-model="idcard"
        type="number"
        name="idcard"
        placeholder="身份证号码"
        clearable
        :readonly="readonly"
        :rules="[{ required: true, message: '请填写身份证' }]"
      />
      <van-cell required title="手机号"/>
      <van-field
        v-model="phone"
        type="number"
        name="phone"
        clearable
        placeholder="手机号"
        :readonly="readonly"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" :disabled="btn_disable">
          下一步
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>

export default {
  name: 'authentication',
  data () {
    return {
      idcard: '',
      phone: '',
      btn_disable: false,
      readonly: false
    }
  },
  props: {
    disable2: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    /**
     * 用户填写身份证信息和手机号码，点击下一步处理事件
     * @param e
     */
    onSubmit (e) {
      if (e.idcard !== '' && e.phone !== '') {
        this.$store.dispatch({
          type: 'addDate',
          idcard: this.idcard,
          phone: this.phone
        })
        this.$emit('part1', false)
        this.btn_disable = true
        this.readonly = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
}

::v-deep .van-button--info {
  color: #ffffff;
  background-color: #a52a2a;
  border: 1px solid rgba(255, 255, 255, 0.5);
  /*max-width: 600px;*/
  /*margin: 0 auto;*/
}
</style>
